<template>
  <div class="learnConfigSelect">
    <div class="autoLearn">
      <span class='learnTitle'>{{$t('自学习配置')}}</span>
      <el-switch :width="lang === 'zh'?56:70" v-model="status" @change='dialogVisible' class="learnStatus switch" active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('开启')" :inactive-text="$t('关闭')"></el-switch>
    </div>
    <div class="depthAnalysis" v-if="timeShow">
      <span class='learnTitle'>{{$t('深度过滤协议分析')}}</span>
      <el-switch :width="lang === 'zh'?56:70" v-model="analysisType" @change='analysisTypeChange' class="learnAnalysisType switch" active-color="#009966" inactive-color="#CCCCCC" active-value="ON" inactive-value="OFF" :active-text="$t('开启')" :inactive-text="$t('关闭')"></el-switch>
    </div>
    <div v-if="timeShow">
      <!-- {{timeFormat}} -->
      <animate-clock :terminalTime="residue_time" @overTime='learnConfigChange' ref="animateClock" />
    </div>
    <LearnConfigDialog v-if="learnConfigDialogVisible" ref="refLearnConfigDialogVisible" @learn='learnConfigChange'></LearnConfigDialog>
  </div>
</template>
<script>
import { getLearnConfig, setLearnConfig } from '@/api/safe/intellect/learnConfig'
import { getStatus, setStatus } from '@/api/safe/analysis'
import LearnConfigDialog from './components/LearnConfigDialog'
import animateClock from './components/animate-clock'
// import { parseTime } from '@/utils/index.js'
export default {
  name: 'learnConfig',
  components: {
    LearnConfigDialog,
    animateClock
  },
  data () {
    return {
      learnConfigDialogVisible: false,
      lang: this.$i18n.locale,
      status: 'disable',
      analysisType: 'OFF',
      residue_time: null,
      timer: null,
      timeShow: false
    }
  },
  mounted () {
    this.listData()
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    // 列表
    listData () {
      getLearnConfig().then(res => {
        if (res.status === 0) {
          this.status = res.info[0].status === 'OFF' ? 'disable' : 'enable'
          // this.residue_time = parseTime(res.info[0].residue_time * 1000 + new Date().getTime())
          if (this.status === 'enable') {
            getStatus().then(res => {
              this.analysisType = res.info[0].status
            })
          }
          if (res.info[0].residue_time > 0) {
            this.timeShow = true
          }
          this.residue_time = res.info[0].residue_time * 1000
        }
      })
    },
    // 开启自学习时打开配置
    dialogVisible (data) {
      if (data === 'enable') {
        this.learnConfigDialogVisible = true
        this.$nextTick(() => {
          this.$refs.refLearnConfigDialogVisible.init(data)
        })
      } else {
        this.learnConfigChange()
      }
    },
    analysisTypeChange () {
      setStatus({status: this.analysisType}).then(res => {
        this.$messages.success(this.$t(res.msg))
      })
    },
    learnConfigChange () {
      setLearnConfig(({status: 'disable'})).then(res => {
        this.$messages.success(this.$t(res.msg))
        this.$refs.animateClock.handStopTime()
        this.timeShow = false
        this.listData()
      })
    },
    statusDisable () {
      this.status = this.status === 'disable' ? 'enable' : 'disable'
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin box {
  width: 260px;
  margin-right: 3px;
  margin-bottom: 3px;
  background-color: #eeeeee;
}
.learnConfigSelect {
  margin-top: 15px;
  line-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .autoLearn {
    @include box;
  }
  .depthAnalysis {
    @include box;
  }
}
.learnTitle {
  width: 170px;
  margin-left: 10px;
  display: inline-block;
}
</style>
